<template>
  <div class="wrap">
    <content-layout
      :title="$t('invitation.myInvitationLink')"
      dark-color="#6339f3"
      light-color="#9c52ff"
    >
      <div class="me-link">
        <div class="left">
          <el-input v-model="invitation_address" :placeholder="$t('invitation.placeholder')" />
        </div>
        <div class="copy">
          <el-button @click="copyaddr()" type="danger" round>{{ $t('invitation.button.copy') }}</el-button>
        </div>
      </div>
    </content-layout>
    <!-- Stage1邀请明细 -->
    <content-layout
      :title="$t('invitation.stageOneTit')"
      dark-color="#6339f3"
      light-color="#9c52ff"
    >
      <div class="content-pad">
        <el-row class="stage-detail">
          <el-col :xs="24" :sm="15" :md="15" :lg="15" :xl="15">
            <div class="flex stage-info1">
              <div class="flex flex-1 flex-column">
                <span class="stage-detail-nums">
                  <span>{{stag1.totalPerson || 0}}</span>
                  <span>{{ $t('invitation.people') }}</span>
                </span>
                <span class="stage-detail-txt">
                  <i></i>
                  <span>{{ $t('invitation.invitedNumber') }}</span>
                </span>
              </div>
              <div class="flex flex-1 flex-column stage-detail-right">
                <span class="stage-detail-nums">
                <span>{{asset.y1.kid || 0}}</span>
                  <span>USDT</span>
                </span>
                <span class="stage-detail-txt">
                  <i></i>
                  <span>{{ $t('invitation.USDTAmounts') }}</span>
                </span>
              </div>
            </div>              
        </el-col>
          <el-col :xs="24" :sm="9" :md="9" :lg="9" :xl="9" class="extract-award">
          <el-button type="danger" :disabled="!asset.y1.kid" @click="$withdrawTokenAll('kid',false)" round>{{ $t('invitation.button.extractAward') }}</el-button>
        </el-col>
        </el-row>
        <div class="b-d stage-one-b-d"></div>
        <div class="stage-one-detall-table">
        <h5>{{ $t('invitation.invitationDetailsTit') }}</h5>
        <el-table :data="tableData['1']" :empty-text="$t('invitation.tableEmptyText')" stripe style="width: 100%">
          <el-table-column align="left" prop="addr" :label="$t('invitation.stageOneTable.address')">
          </el-table-column>
          <el-table-column align="left" prop="level" :label="$t('invitation.stageOneTable.level')">
          </el-table-column>
          <el-table-column align="left" prop="tokenAmount" :label="$t('invitation.stageOneTable.lockedKisAmounts')">
          </el-table-column>
        </el-table>
        <div class="pagination">
          <el-pagination background layout="prev, pager, next" :total="stag1.totalPerson"  :current-page="stag1.pageNum" @current-change="loadChildList1">
          </el-pagination>
          </div>
        </div>
      </div>
    </content-layout>
    <!-- Stage1邀请明细 -->
    <!-- Stage2邀请明细 -->
    <content-layout
      :title="$t('invitation.stageTwoTit')"
      dark-color="#6339f3"
      light-color="#9c52ff"
    >
      <div class="content-pad">
        <el-row class="stage-detail stage-two-detail">
          <el-col :xs="24" :sm="24" :md="15" :lg="15" :xl="15" class="stage-two-col-1">
            <div class="mobile-pad">
              <div class="flex stage-info1">
                <div class="flex flex-1 flex-column">
                  <span class="stage-detail-nums">
                    <span>{{stag2.totalPerson || 0}}</span>
                    <span>{{ $t('invitation.people') }}</span>
                  </span>
                  <span class="stage-detail-txt">
                    <i></i>
                    <span>{{ $t('invitation.invitedNumber') }}</span>
                  </span>
                </div>
                <div class="flex flex-1 flex-column stage-detail-right">
                  <span class="stage-detail-nums">
                <span>{{asset.y2.kia || 0}}</span>
                    <span>USDT</span>
                  </span>
                  <span class="stage-detail-txt">
                    <i></i>
                    <span>{{ $t('invitation.USDTAmounts') }}</span>
                  </span>
                </div>
              </div>
              <!-- <div class="stage-two-buttons">

            <el-button type="danger" :disabled="!asset.y2.kia" @click="$withdrawTokenAll('kia',true)" round>{{ $t('invitation.button.extractAward') }}</el-button> -->
          <!-- </div> -->
            </div>
            <!-- <div class="b-d stage-two-b-d"></div> -->
          </el-col>     
       

          <el-col :xs="24" :sm="9" :md="9" :lg="9" :xl="9" class="extract-award">
          <el-button type="danger" :disabled="!asset.y2.kia" @click="$withdrawTokenAll('kia',false)" round>{{ $t('invitation.button.extractAward') }}</el-button>
        </el-col>

      </el-row>
     <div class="b-d"></div>
        <div class="stage-one-detall-table">
          <h5>{{ $t('invitation.invitationDetailsTit') }}</h5>
        <el-table :data="tableData['2']" :empty-text="$t('invitation.tableEmptyText')" stripe style="width: 100%">
          <el-table-column align="left" prop="addr" :label="$t('invitation.stageTwoTable.address')">
          </el-table-column>
          <el-table-column align="left" prop="level" :label="$t('invitation.stageTwoTable.level')">
          </el-table-column>
          <el-table-column align="left" prop="tokenAmount" :label="$t('invitation.stageTwoTable.lockedKiaAmounts')">
          </el-table-column>
        </el-table>
        <div class="pagination">
          <el-pagination background layout="prev, pager, next" :total="stag2.totalPerson"  :current-page="stag2.pageNum" @current-change="loadChildList2" >
          </el-pagination>
          </div>
        </div>
      </div>
    </content-layout>
    <!-- Stage2邀请明细 -->
        <popup :alertObj="alertObj" />
  </div>
</template>

<script>
import ContentLayout from "../components/ContentLayout.vue";
import axios from "axios";
import Popup from '../components/Popup'
// import { set } from 'vue/types/umd';

let thiz=null;
export default {
  components: {
    ContentLayout,
    Popup
  },
  data() {
    return {
      tableData: {'1':[],'2':[]}, //addr tronAmount
      stag1:{pageNum:1,pageSize: 10},
      stag2:{pageNum:1,pageSize: 10},
      invitation_address:"",
      asset: {
        b: {
          kit: 0,
        },
        y1:{
          kid:0,
        },
        y2:{
          kia:0,
        }
      },
      alertObj:{'isShow':false,'type':'success','message':''}
    }
  },
  created() {
    thiz=this;
  },
  mounted() {
    connectWallt(() => {
    this.loadChildList(1);
    this.loadChildList(2);
    this.$updateAsset("kid", "y1",3); 
    this.$updateAsset("kia", "y2",3); 
    this.buildInvitationAddress();
    });    

  },

  methods: {
    // 复制地址
    buildInvitationAddress() {
      let addr = '';
      try {
        addr = window.dftAddr();
      } catch (error) {
        console.log("******************-----------------")
        return
      }
      if (addr) {
        var arr = location.href.split("/");
        var url_head = arr[0] + "//" + arr[2] + "/";
        this.invitation_address= url_head + "?invitation_address=" + addr;
      } 
    },
    copyaddr() {
      if (this.invitation_address) {
        let _this = this;
        this.copyText(this.invitation_address, function () {
          _this.$message({
            message: this.$t('popup.copySuccess'),
            type: "success",
          });
        });
      }
    },
    copyText(str, func) {
      if (str) {
        let u = navigator.userAgent;
        // let  app = navigator.appVersion
        let isAndroid = u.indexOf("Android") > -1 || u.indexOf("Linux") > -1;
        let systemFlag = "";
        //要先判断当前是什么系统，否则会报错，无法执行语句
        if (isAndroid) {
          systemFlag = "android";
        } else {
          systemFlag = "ios";
        }
        if (systemFlag == "android") {
          //android复制
          //只需要改变取值方式即可
          var save = function (e) {
            e.clipboardData.setData("text/plain", str);
            e.preventDefault();
          };
          if (!document.execCommand) {
            alert("该浏览器不支持复制");
          }
          document.addEventListener("copy", save);
          document.execCommand("copy");
          document.removeEventListener("copy", save); // 执行浏览器复制命令

          if (func) {
            func();
          } else {
            alert("复制成功");
          }
        } else {
          //IOS复制
          var input = document.createElement("input");
          //只需要改变取值方式即可
          input.value = str;
          document.body.appendChild(input);
          input.select();
          input.setSelectionRange(0, input.value.length);
          document.execCommand("Copy");
          document.body.removeChild(input);

          if (func) {
            func();
          } else {
            alert("复制成功");
          }
        }
      } else {
        console.log("没有需要复制的内容");
      }
    },
    loadChildList1(val) {
      this.stag1.pageNum=val
      this.loadChildList(1);
    },
    loadChildList2(stag) {
      this.stag2.pageNum=val
      this.loadChildList(2);
    },
    loadChildList(stag) {
      let stagObj=thiz['stag'+stag]
      loadTron(() => {
        axios
          // .get("http://66.42.54.66:8080/kios/reference/list", {
            .get("http://www.kios.one/kios/reference/list", {
          // .get("http://localhost:8080/kios/reference/list", {
            params: {
              reference: window.dftHexAddr(),
              // reference: '89e3e9d0d569453bf959c77f5437fcb9b97b612e',
              pageNum: stagObj.pageNum,
              stag: stag,
              pageSize: stagObj.pageSize,
            },
          })
          .then((res) => {
            if (res && res.data && res.data.data ) {
              let list=res.data.data.list
              if(list){
                for (let index = 0; index < list.length; index++) {
                  const element = list[index];
                  element.addr=window.tronWeb.address.fromHex("0x"+element.addr)
                  element.tokenAmount=window.mathDownToken(stag==1?'kid':'kia',element.tokenAmount);
                  
                }
              }
              thiz.tableData[stag]=list

              stagObj['totalPerson'] = res.data.data.totalPerson;

              stagObj['totalAmont'] = window.mathDownToken(stag==1?'kid':'kia',res.data.data.totalAmont);
            }
          })
          .catch( e => {
            console.log("获取数据失败");
          });
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.flex {
  display: flex;
  text-align: center;
}
.flex-1 {
  flex: 1;
}

.flex-column {
  flex-direction: column;
}
.content-pad {
  padding: 30px 30px 0;
}
.wrap {
  width: 100%;
  .left {
    padding: 0 20px;
  }
  .me-link {
    padding-bottom: 60px;
    display: flex;
    .left {
      flex: 1;
      padding-top: 52px;
    }
    .copy {
      padding-top: 52px;
      width: 140px;
      button {
        width:  100%;
        background-color: #6439f3;
        border-color: #6439f3;
        &:active {
          background-color: #5b2fea;
          border-color: #5b2fea;
        }
      }
    }
  }
  .stage-detail {
    height: 320px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    background: url("../assets/image/invitation_bg_1.png") no-repeat center;
    background-size: 100% 100%;
    .stage-two-buttons {
      padding-top: 50px;
      .auth {
        width: 120px;
      }
      .depositKit {
        width: 160px;
      }
    }
    .stage-info1, .stage-info2 {
        .stage-detail-nums {
          color: #333333;
          font-size: 16px;
          span {
            &:first-child {
              font-size: 48px;
              font-weight: bold;
            }
            &:last-child {
              padding-left: 10px;
            }
          }
        }
        .stage-detail-txt {
          display: flex;
          align-items: center;
          justify-content: center;
          font-size: 16px;
          color: #999999;
          padding-top: 30px;
          i {
            display: inline-block;
            width: 16px;
            height: 16px;
            background: url("../assets/image/user.png") no-repeat left center;
            background-size: 16px 16px;
          }
          span {
            padding-left: 9px;
          }
        }
      .stage-detail-right {
        .stage-detail-nums {
          color: #f9305b;
        }
        .stage-detail-txt {
          i {
            background: url("../assets/image/dollar.png") no-repeat left center;
            background-size: 16px 16px;
          }
        }
      }
    }
  }
  .b-d {
    height: 8px;
    background: linear-gradient(90deg, #ff7a57,#ff9f58);
    border-radius: 0 0 6px 6px;
  }
  .stage-two-b-d {
    display: none;
  }
  .stage-one-detall-table {
    h5 {
      color: #333;
      font-size: 18px;
      padding: 35px 15px 20px;
      text-align: center;
    }
  }
  .pagination {
    padding: 40px;
    display: flex;
    justify-content: center;
  }
}

@media screen and (max-width: 1023px) {
  .content-pad {
    padding: 10px 10px 0;
  }
  .mobile-pad {
    padding: 35px 15px 25px;
  }
  .wrap {
    .me-link {
      flex-direction: column !important;
      padding-bottom: 30px;
      .copy {
        flex: 1;
        width: 100%;
      }
      .left, .copy {
        padding: 30px 15px 0;
      }
    }
    .b-d {
      display: none;
    }
    .stage-one-b-d, .stage-two-b-d {
      display: block !important;
    }
    .stage-detail {
      flex-direction: column;
      height: 232px;
      .extract-award {
        padding-top: 33px;
      }
      .stage-detail-nums {
        font-size: 14px !important;
        span {
          &:first-child {
            font-size: 30px !important;
          }
          &:last-child {
            padding-left: 8px !important;
          }
        }
      }
      .stage-detail-txt {
        font-size: 14px !important;
      }
    }
    .stage-two-detail {
      height: auto;
      padding: 0;
      background: none;
      .stage-two-col-1, .stage-two-col-2 {
        background: url("../assets/image/invitation_bg_1.png") no-repeat center;
        background-size: 100% 100%;
        border-radius: 8px;
      }
      .stage-two-col-2 {
        margin-top: 20px;
      }
      .stage-two-buttons {
        padding-top: 40px;
      }
    }
 }
}

@media only screen and (min-width:1024px) {
  .copy {
    margin-right: 20px !important;
  }
}

@media screen and (min-width: 1300px) {
  .copy {
    margin-right: 0 !important;
  }
  .wrap {
    width: 1300px;
    margin: 0 auto;
    .me-link {
      padding: 0 80px 60px;
    }
  }
}
</style>
